<template>
	<view :style="{height:windowHeight+'px'}">
		<uni-nav-bar  :fixed="true" shadow  status-bar left-icon="left" left-text="返回" title="城南河1#处理站" @clickLeft="back" />
		<uni-section padding="0 10px" title="">
			<view class="uni-padding-wrap uni-common-mt">
				<uni-segmented-control :current="current" :values="items" :style-type="styleType"
					:active-color="activeColor" @clickItem="onClickItem" />
			</view>
			<view class="content">
				<view v-show="current === 0">
					<uni-card :isFull="true">	
						<view class="baseSession">
							<view class="flex-b"> 
								<view class="leftDiv">
									<image src="../../static/icon/zuobiao.png" mode=""></image>
									<text class="ml5">站点位置</text>
								</view>
								<view class="rightText">
									顶山街道/城南河
								</view>
							</view>
						</view>
						<view class="baseSession">
							<view class="flex-b"> 
								<view class="leftDiv">
									<image src="../../static/icon/jing.png" mode=""></image>
									<text class="ml5">站点坐标</text>
								</view>
								<view class="rightText">
									【119.54，31.49】
								</view>
							</view>
						</view>
						<view class="baseSession">
							<view class="flex-b"> 
								<view class="leftDiv">
									<image src="../../static/icon/biaoqian.png" mode=""></image>
									<text class="ml5">站点类型</text>
								</view>
								<view class="rightText">
									处理站
								</view>
							</view>
						</view>
					</uni-card>
					<uni-card :isFull="true">
						<view class="baseSession">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5" style="font-weight: 600;">站点状态</text>
								</view>
								<view class="rightText">
									<uni-data-checkbox v-model="values" :localdata="status" />
								</view>
							</view>
						</view>
					</uni-card>
					<uni-card :isFull="true">
						<view class="baseSession">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5" style="font-weight: 600;">摄像头状态</text>
								</view>
								<view class="rightText">
									<uni-data-checkbox v-model="values" :localdata="status" />
								</view>
							</view>
						</view>
					</uni-card>
					<uni-card :isFull="true">
						<view class="baseSession">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5">工艺</text>
								</view>
								<view class="rightText">
									多级AO >
								</view>
							</view>
						</view>	
						<view class="baseSession">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5">处理规模</text>
								</view>
								<view class="rightText">
									10t/d
								</view>
							</view>
						</view>
						<view class="baseSession">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5">设备厂家</text>
								</view>
								<view class="rightText">
									环域
								</view>
							</view>
						</view>
						<view class="baseSession">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5">运行日期</text>
								</view>
								<view class="rightText">
									2023-12-30
								</view>
							</view>
						</view>
						<view class="baseSession">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5">网关编号</text>
								</view>
								<view class="rightText">
									301019050201
								</view>
							</view>
						</view>
						<view class="baseSession">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5">电表编号</text>
								</view>
								<view class="rightText">
									db492384u4444-31
								</view>
							</view>
						</view>
					</uni-card>
					
				</view>
				<view v-show="current === 1">
					<view class="baseSession sessone">
						<view class="flex-b"> 
							<view class="leftDiv">
								<text class="ml5 fontWeight">1#泵站</text>
							</view>
							<view class="rightText">
								<text class="numStyle">120</text>
							</view>
						</view>
					</view>
					<view class="baseSession sessone">
						<view class="flex-b"> 
							<view class="leftDiv">
								<text class="ml5 fontWeight">2#泵站</text>
							</view>
							<view class="rightText">
								<text class="numStyle">120</text>
							</view>
						</view>
					</view>
					<view class="baseSession sessone">
						<view class="flex-b"> 
							<view class="leftDiv">
								<text class="ml5 fontWeight">3#泵站</text>
							</view>
							<view class="rightText">
								<text class="numStyle">120</text>
							</view>
						</view>
					</view>
					<view class="baseSession sessone">
						<view class="flex-b"> 
							<view class="leftDiv">
								<text class="ml5 fontWeight">4#泵站</text>
							</view>
							<view class="rightText">
								<text class="numStyle">40</text>
							</view>
						</view>
					</view>
				</view>
				<view v-show="current === 2">
						<view class="baseSession sessone">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5 fontWeight">泵站运行时间</text>
								</view>
								<view class="rightText">
									<text class="numStyle">120H</text>
								</view>
							</view>
						</view>
						<view class="baseSession sessone">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5 fontWeight">消毒机停止时间</text>
								</view>
								<view class="rightText">
									<text class="numStyle">12H</text>
								</view>
							</view>
						</view>
						<view class="baseSession sessone">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5 fontWeight">清洗机停机时间</text>
								</view>
								<view class="rightText">
									<text class="numStyle">10H</text>
								</view>
							</view>
						</view>
						<view class="baseSession sessone">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5 fontWeight">阀门工作时间</text>
								</view>
								<view class="rightText">
									<text class="numStyle">10H</text>
								</view>
							</view>
						</view>
						<view class="baseSession sessone">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5 fontWeight">鼓风机轮换时间</text>
								</view>
								<view class="rightText">
									<text class="numStyle">10H</text>
								</view>
							</view>
						</view>
						<view class="baseSession sessone">
							<view class="flex-b"> 
								<view class="leftDiv">
									<text class="ml5 fontWeight">提升泵轮换时间</text>
								</view>
								<view class="rightText">
									<text class="numStyle">10H</text>
								</view>
							</view>
						</view>
				</view>
				<view v-show="current === 3">
					<view class="baseSession sessone">
						<view class="flex-b"> 
							<view class="leftDiv">
								<view>
									<view class="ml5 fontWeight">
										气泵告警
									</view>
									<view class="ml5 dateStyle">
										2024-04-24 12:00:00
									</view>
								</view>
								
							</view>
							<view class="rightText">
								<text class="numStyle waring">严重告警</text>
							</view>
						</view>
					</view>
				</view>
				<view v-show="current === 4">
					<view class="baseSession">
						<view id="myShuang1" style="width:99vw;height: 350px;"></view>
						<view id="myShuang2" style="width:99vw;height: 350px;"></view>
					</view>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				chartShuang:null,
				windowHeight: 700,
				items: ['基础信息', '设备详情', '运行参数', '告警信息', '数据分析'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text',
				 isOpen: new Array(5).fill(false), // 初始化 isOpen 数组，长度为 5，初始值为 false
				 values:0,
				 status: [{
				 	text: '在线',
				 	value: 0
				 }, {
				 	text: '离线',
				 	value: 1
				 }],
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.windowHeight = sysInfo.windowHeight;
			 
		},
		mounted() {
			this.echarts1();	
			this.echarts2();	
		},
		computed: {
			// 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
		
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//选项卡选择
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			//查看详情
			detail(e) {
				uni.navigateTo({
					url:'/pages/xunjian/xdetail'
				})
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			toggleMenu(index) {
		      // 切换对应索引位置的 isOpen 状态
		      this.isOpen[index] = !this.isOpen[index];
		    },
			echarts1(){
				this.chartShuang = echarts.init(document.getElementById('myShuang1'));
				let optionShuang = {
					grid: {                // 调整柱状图位置
						left: '0%',
						right: '2%',
						bottom: '0%',
						containLabel: true
					  },
					xAxis: {
					   type: 'category',
					   data: ['04-01', '04-02', '04-03', '04-04', '04-05', '04-06', '04-07']
					 },
					 yAxis: {
					   type: 'value',
					   name:'(万吨)'
					 },
					 series: [
					   {
						 data:[7, 4, 7, 12, 11, 8, 4],
						 type: 'line',
						 smooth: true,
						 areaStyle: {},
						itemStyle: {
							normal: {
								color: '#0099FF'
							}
						},
						 label: {
						      show: true, // 显示标签
						      position: 'top' // 标签位置，可以根据需要调整
						    }
					   }
					 ]
					
				}
				this.chartShuang.setOption(optionShuang);
			},
			echarts2(){
				this.chartShuang = echarts.init(document.getElementById('myShuang2'));
				let optionShuang = {
					grid: {                // 调整柱状图位置
						left: '0%',
						right: '2%',
						bottom: '0%',
						containLabel: true
					  },
					xAxis: {
					   type: 'category',
					   data: ['04-01', '04-02', '04-03', '04-04', '04-05', '04-06', '04-07']
					 },
					 yAxis: {
					   type: 'value',
					    name:'(用电量)'
					 },
					 series: [
					   {
						 data:[7, 4, 7, 12, 11, 8, 4],
						 type: 'bar',
						itemStyle: {
							normal: {
								color: '#0099FF'
							}
						},
						 label: {
						      show: true, // 显示标签
						      position: 'top' // 标签位置，可以根据需要调整
						    }
					   }
					 ]
					
				}
				this.chartShuang.setOption(optionShuang);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFangSC, PingFang SC;
		.flex-b{
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.uni-card{
			margin: 0.8rem 0 !important;
		}
		.ml5{
			margin-left: 0.5rem;
		}
		.fontWeight{
			font-weight: 600;
		}
		.dateStyle{
			color: #999999;
			font-size: 0.9rem;
			margin-top: 0.5rem;
		}
		.numStyle{
			background-color: #0289FF;
			color: white;
			padding: 0.3rem 1rem;
			border-radius: 2rem;
			width: 1.5rem;
			text-align: center;
			display: inline-block;
		}
		.waring{
			background-color: #D72C01;
			padding: 0.3rem 0.5rem;
			width: 4rem;
		}
		padding: 20rpx 0;
		.baseSession{
			padding: 0.5rem 0;
			.leftDiv{
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #222222;
				font-size: 1rem;
				
				image{
					width: 2rem;
					height: 2rem;
				}
			}
			.rightText{
				color: #666666;
				font-size: 0.8rem;
			}
		}
		.sessone{
			border-bottom: 1px solid #ededed;
			padding: 0.8rem 0;
		}
	}
</style>
